<template>
  <div>
    <el-form class="p-form" ref="form" :model="form" label-position="left" label-width="130px">
      <el-form-item label="区域">
        <el-select style="width:267px;" v-model="form.area" placeholder="请选择区域">
          <el-option label="东南中心" value="dn"></el-option>
          <el-option label="南方中心" value="nf"></el-option>
          <el-option label="北方中心" value="bf"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="可用分区">
        <el-radio-group v-model="form.usable" @change="usabelChange">
          <el-radio-button label="可用区1"></el-radio-button>
          <!-- <el-radio-button label="可用区2"></el-radio-button>
          <el-radio-button label="可用区3"></el-radio-button> -->
        </el-radio-group>
      </el-form-item>
      <div class="form-br"></div>
      <el-form-item label="主机类别">
        <el-radio-group v-show="['可用区1','可用区2'].includes(form.usable)" v-model="form.pcClass">
          <el-radio v-show="form.usable==='可用区1'" label="通用型计算机"></el-radio>
          <el-radio label="通用计算增强型"></el-radio>
        </el-radio-group>
        <div v-show="form.usable==='可用区3'" class="pcarea3">
          当前AZ下没有专属主机类型可选
        </div>
      </el-form-item>
      <el-form-item label="主机类型">
        <el-radio-group v-show="['可用区1','可用区2'].includes(form.usable)" v-model="form.pcType">
          <el-radio v-show="form.usable==='可用区1'" label="s6"></el-radio>
          <el-radio v-show="form.usable==='可用区2'" label="s6_pro"></el-radio>
        </el-radio-group>
        <div v-show="form.usable==='可用区3'" class="pcarea3">
          当前AZ下没有专属主机类型可选
        </div>
      </el-form-item>
      <el-form-item label="" style="margin-top:-25px">
        <div class="role-desbox">
          <div v-show="form.usable!='可用区3'">
            <div class="escplasin">支持部署的ESC规格</div>
            <div class="esclist esclist-t">
              <div>规格名称</div>
              <div>vCPUs</div>
              <div>内存</div>
            </div>
            <div class="esclist">
              <div>physical.o3</div>
              <div>16</div>
              <div>25</div>
            </div>
          </div>
        </div>
      </el-form-item>

      <div class="form-br"></div>
      <el-form-item label="自动放置">
        <el-radio-group v-model="form.isAutoPut">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <el-form-item label="标签">
        <div style="min-height: 80px;">
          <div class="flex-c">
            <div class="tag-btn" @click="hasTag=true"><i class="el-icon-plus"></i></div>
            <div>
              添加标签
            </div>
          </div>
          <div >
            <div class="flex-c" v-show="hasTag">
              <div class="tag-btn" @click="delTag"><i class="el-icon-minus"></i></div>
              <el-input size="small" style="width:233px;margin-right: 40px;" v-model="form.tagKey" placeholder="请输入标签键"></el-input>
              <el-input size="small" style="width:233px;" v-model="form.tagVal" placeholder="请输入标签值"></el-input>
            </div>
          </div>
        </div>
      </el-form-item> -->
      <el-form-item label="标签">
        <div class="flex-c" >
          <el-input size="small" style="width:233px;margin-right: 40px;" v-model="form.tagKey" placeholder="物理机位置"></el-input>
          <el-input size="small" style="width:233px;" v-model="form.tagVal" placeholder="SQ机房"></el-input>
        </div>
      </el-form-item>

      <div class="form-br"></div>

      <el-form-item label="主机名称">
        <el-input size="small" style="width:233px" v-model="form.pcName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="注册数量">
        <div class="addnum">
          <el-input-number size="small" style="width:215px" v-model="form.pcNum" :min="1"></el-input-number>
          <div class="explain">
            注册多台主机时，系统自动增加后缀，例如：bms-0001
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        hasTag: false,
        form: {
          area: '',
          usable: '可用区1',
          pcClass: '',
          pcType: '',
          isAutoPut: '',
          tagKey: '',
          tagVal: '',
          pcName: '',
          pcNum: 1
        }
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
      delTag() {
        this.hasTag = false
        this.form.tagKey = ''
        this.form.tagVal = ''
      },
      usabelChange(val) {
        this.form.pcClass = ''
        this.form.pcType = ''
      }
    }

  }
</script>

<style scoped lang="less">
  .p-form {
    /deep/.el-form-item__label {
      font-size: 16px;
      font-family: 'PingFang SC ', 'PingFang SC';
      font-weight: 650;
      font-style: normal;
      color: rgba(0, 0, 0, 0.847058823529412);
    }
  }

  .addnum {
    display: flex;

    .explain {
      margin-left: 10px;
      line-height: 50px;
      font-size: 12px;
      color: #AAAAAA;
    }
  }

  .form-br {
    height: 1px;
    background-color: #ebebeb;
    width: 100%;
    margin-bottom: 15px;
  }

  .role-desbox {
    width: 932px;
    min-height: 125px;

    .escplasin {
      margin-left: 10px;
      font-size: 12px;
      color: #AAAAAA;
    }

    .esclist {
      height: 50px;
      display: flex;
      align-items: center;

      div {
        color: #333333;
        width: 160px;
        text-align: center;
      }
    }

    .esclist-t {
      height: 35px;
      background-color: rgba(242, 242, 242, 1);
    }

  }

  .tag-btn {
    margin-right: 15px;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    border: 1px #1890FF solid;
    border-radius: 50%;
    color: #1890FF;

    &:hover {
      background-color: #1890FF;
      color: #ffffff;
    }
  }

  /deep/.el-radio-button {

    border-radius: 4px;
    overflow: hidden;
  }

  /deep/.el-radio-button {
    .el-radio-button__inner {
      background-color: rgba(188, 223, 255, 1);
      color: #716E6E;
      font-size: 16px;
    }

    &.is-active {
      .el-radio-button__inner {
        background-color: #1890FF;
        color: #ffffff;

      }
    }
  }

  .pcarea3 {
    font-size: 12px;
    color: #FF3636;
  }
</style>
